<style lang="less">
@import "@/styles/table-common.less";
.info {
  margin-bottom: 15px;
  ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    li {
      width: 25%;
      padding: 5px 0;
    }
  }
}
</style> 
<template>
  <div class="search">
    <Card v-if="companyInfo.companyTypeId">
      <div class="info">
        <h3>企业信息</h3>
        <ul>
          <li>
            <span class="label">企业性质：</span>
            <span>{{ handlefilter(1, companyInfo.companyTypeId) }}</span>
          </li>
          <li>
            <span class="label">企业名称：</span>
            <span>{{ companyInfo.companyName }}</span>
          </li>
          <li>
            <span class="label">行业类型：</span>
            <span>{{ handlefilter(3, companyInfo.companyIndustryId) }}</span>
          </li>
          <li>
            <span class="label">公司规模：</span>
            <span>{{ handlefilter(2, companyInfo.companyScaleId) }}</span>
          </li>
          <li>
            <span class="label">组织证件：</span>
            <a v-if="companyInfo.companyLicense" @click="showBigImg=true">点击查看</a>
          </li>
          <li>
            <span class="label">剩余云打印积分：</span>
            <span>{{ companyInfo.companyPrintIntegral }}</span>
            <Button
              type="primary"
              ghost
              v-if="userInfo.type == 1"
              size="small"
              style="margin-left: 15px"
              @click="addintegral(1)"
              >添加</Button
            >
          </li>
          <li>
            <span class="label">剩余预约会议专项积分：</span>
            <span>{{ companyInfo.companyMeetIntegral }}</span>
            <Button
              type="primary"
              ghost
              v-if="userInfo.type == 1"
              size="small"
              style="margin-left: 15px"
              @click="addintegral(2)"
              >添加</Button
            >
          </li>
        </ul>
      </div>
      <div class="info">
        <h3>联系人信息</h3>
        <ul>
          <li>
            <span class="label">姓名：</span>
            <span>{{ companyInfo.user.nickname }}</span>
          </li>
          <li>
            <span class="label">手机号：</span>
            <span>{{ companyInfo.user.mobile }}</span>
          </li>
          <li>
            <span class="label">企业地址：</span>
            <span>{{ companyInfo.companyAddress }}</span>
          </li>
        </ul>
      </div>
    </Card>
    <Card>
        <Row @keydown.enter.native="handleSearch">
            <Form ref="searchForm" :model="searchForm" inline :label-width="150">
            <FormItem label="姓名：">
                <Input
                type="text"
                v-model="searchForm.name"
                clearable
                placeholder="请输入姓名"
                style="width: 200px"
                />
            </FormItem>
            <FormItem label="手机号：">
                <Input
                type="text"
                v-model="searchForm.mobile"
                clearable
                placeholder="请输入手机号"
                style="width: 200px"
                />
            </FormItem>
            <FormItem style="margin-left: -35px" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search"
                >搜索</Button
                >
                <Button @click="handleReset">重置</Button>
            </FormItem>
            </Form>
        </Row>
      <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加</Button>
      </Row>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <addEdit
      :data="form"
      :type="showType"
      :companyId="companyId"
      v-model="showUser"
      @on-submit="getDataList"
    />
    <Modal title="组织证件" v-model="showBigImg">
        <img :src="companyInfo.companyLicense" v-if="showBigImg" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import {
  getScCompanyUserBillStatistic,
  scUserUpdStatusById,
  scCompanyKickOut,
  getCompanyDetailById,
  getCompanyScale,
  getCompanyType,
  getFindAll,
  addMeetIntegral,
  addPrintIntegral,
} from "@/api/index";

import addEdit from "./addEdit.vue";
import { mapState } from "vuex";
export default {
  name: "company-info",
  components: {
    addEdit,
  },
  data() {
    return {
      showBigImg:false,
      addIntegral: "",
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      companyTypeList: [], //企业类型列表
      companyScaleList: [], //企业规模列表
      companyNatureList: [], //企业性质列表
      message: "",
      showUser: false,
      showType: "0",
      loading: true,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        // sort: "createTime",
        order: "desc",
      },
      columns: [
        {
          title: "姓名",
          key: "realName",
          minWidth: 220,
          align: "center",
          render: (h, params) => {
            let nodeTxt = h(
              "a",
              {
                on: {
                  click: () => {
                    let obj = {
                      ...params.row,
                      companyId: this.companyId,
                      companyName: this.companyInfo.companyName,
                    };
                    this.$router.push({ name: "person_info", params: obj });
                  },
                },
              },
              params.row.realName
            );
            return h("div", [nodeTxt]);
          },
        },
        {
          title: "手机号",
          key: "mobile",
          minWidth: 220,
          align: "center",
        },
        {
          title: "消费会议积分",
          key: "meetIntegral",
          width: 220,
          align: "center",
        },
        {
          title: "结算会议积分",
          key: "settleMeetIntegral",
          width: 220,
          align: "center",
        },
        {
          title: "消费打印积分",
          key: "printIntegral",
          width: 220,
          align: "center",
        },
        {
          title: "结算打印积分",
          key: "settlePrintIntegral",
          width: 220,
          align: "center",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 220,
          align: "center",
        },
        {
          title: "启用状态",
          key: "status",
          width: 140,
          align: "center",
          render: (h, params) => {
            if (params.row.status == 0) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "启用",
                  },
                }),
              ]);
            } else if (params.row.status == -1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "禁用",
                  },
                }),
              ]);
            }
          },
          filterRemote: (e) => {
            let v = "";
            if (e.length > 0) {
              v = e[0];
            }
            this.searchForm.status = v;
            this.searchForm.pageNumber = 1;
            this.getDataList();
          },
        },
        {
          title: "操作",
          key: "createTime",
          width: 130,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            if (params.row.status == 0) {
              enableOrDisable = h(
                "a",
                {
                  on: {
                    click: () => {
                      this.chageable(params.row, -1);
                    },
                  },
                },
                "禁用"
              );
            } else {
              enableOrDisable = h(
                "a",
                {
                  on: {
                    click: () => {
                      this.chageable(params.row, 0);
                    },
                  },
                },
                "启用"
              );
            }
            return h("div", [
              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.remove(params.row);
                    },
                  },
                },
                "踢出"
              ),
            ]);
          },
        },
      ],
      data: [],
      companyInfo: {},
      adminInfo: {},
      companyId: "",
    };
  },
  methods: {
    addintegral(type) {
      this.addIntegral = ""
      let _this = this;
      let text = "";
      if (type == 1) {
        //云打印
        text = "添加云打印积分";
      } else if (type == 2) {
        //会议积分
        text = "添加预约会议专项积分";
      }
      this.$Modal.confirm({
        title: text,
        render: (h) => {
          return h("Input", {
            props: {
              value: this.addIntegral,
              autofocus: true,
              type: "number",
              placeholder: "请输入要添加的积分数",
            },
            on: {
              input: (val) => {
                this.addIntegral = val;
              },
            },
          });
        },
        onOk: function () {
          if (type == 1) {
            addPrintIntegral({
              id: _this.companyId,
              num: _this.addIntegral,
            }).then((RES) => {
              _this.$Modal.remove();
              _this.getCompanyDetailById();
            });
          } else if (type == 2) {
            addMeetIntegral({
              id: _this.companyId,
              num: _this.addIntegral,
            }).then((RES) => {
              _this.$Modal.remove();
              _this.getCompanyDetailById();
            });
          }
        },
      });
    },
    handlefilter(type, val) {
      if (type == 1) {
        //企业性质
        console.log(val);
        console.log(this.companyTypeList);
        let obj = this.companyNatureList.find((item) => item.id == val);
        return obj.title || "";
      } else if (type == 2) {
        //企业规模
        let obj = this.companyScaleList.find((item) => item.id == val);
        return obj.title || "";
      } else if (type == 3) {
        //行业类型
        let obj = this.companyTypeList.find((item) => item.id == val);
        return obj.title || "";
      }
    },
    getCompanyDetailById() {
      getCompanyDetailById({ companyId: this.companyId }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.companyInfo = res.result;
        }
      });
    },
    init() {
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getScCompanyUserBillStatistic({
        companyId: this.companyId,
        ...this.searchForm,
      }).then((res) => {
        this.loading = false;
        if (res.success) {
          // this.data = res.result
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    add() {
      this.showType = "2";
      this.showUser = true;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    chageable(v, status) {
      let statusTxt = status == 0 ? "启用" : "禁用";
      this.$Modal.confirm({
        title: `确认${statusTxt}`,
        content: `您确认要${statusTxt}` + v.realName + " ?",
        loading: true,
        onOk: () => {
          scUserUpdStatusById({ id: v.scuid, status }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    remove(v) {
      let statusTxt = "踢出";
      this.$Modal.confirm({
        title: `确认${statusTxt}`,
        content: `您确认要${statusTxt}` + v.realName + " ?",
        loading: true,
        onOk: () => {
          scCompanyKickOut({ id: this.companyId, uid: v.scuid }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
  },
  async created() {
    this.companyId = localStorage.getItem("companyId");
    await getFindAll().then((res) => {
      if (res.success) {
        this.companyNatureList = res.result;
      }
    });
    await getCompanyType().then((res) => {
      if (res.success) {
        this.companyTypeList = res.result;
      }
    });
    await getCompanyScale().then((res) => {
      if (res.success) {
        this.companyScaleList = res.result;
      }
    });
    let _this = this;
    setTimeout(() => {
      _this.getCompanyDetailById();
    }, 500);
    this.init();
  },
  mounted() {},
};
</script>